<template>
    <article class="homePage-USRealEstateNews-box">
        <div class="container">
            <div class="content">
                <header class="clearfix public-header-bg">
                    <p>海外房地产资讯</p>
                    <p>NEWS</p>
                </header>
                <a-row :gutter="60">
                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="left-box">
                        <div class="swiper-container" id="AdvertisingNews-swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="(item,index) in AdvertisingNewsItem" :key="index">
                                    <a :href="item.url" target="_blank" :title="item.description" :alt="item.description">
                                        <img v-lazy="item.photo" :title="item.description" :alt="item.description">
                                        <p class="webkit-text-overflow-1lines">{{ isNull0(item.description) }}</p>
                                    </a>
                                </div>
                            </div>
                            <ul class="swiper-pagination"></ul>
                        </div>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="center-box clearfix">
                        <aside>
                            <header class="clearfix">
                                <span>海外房产</span>
                                <router-link :to="{name: 'NewsSecondaryList', params: {type: '6' }}" title="海外房产新闻资讯" alt="海外房产新闻资讯">更多></router-link>
                            </header>
                            <div class="USRealEstateNews-ul-skeleton">
                                <a-skeleton active :title="false" :paragraph="{rows: 1, width: '100%'}" v-for="(item, index) in USRealEstateItem" :key="index" :loading="USRealEstateLoading" />
                            </div>
                            <ul v-show="!USRealEstateLoading && !USRealEstateNoDataShow">
                                <li v-for="(item,index) in USRealEstateItem" :key="index">
                                    <router-link :to="{name: 'NewsDetails', params: {newsId: item.id }}" class="webkit-text-overflow-1lines" target="_blank" :title="item.title" :alt="item.title">
                                        <i class="iconfont icon-weidu"></i>{{ isNull0(item.title) }}
                                    </router-link>
                                </li>
                            </ul>
                            <h5 style="text-align: center; padding: 0 15px; line-height: 115px; margin: 8px 0 0 0;" v-show="USRealEstateNoDataShow">暂未查询到数据！</h5>
                        </aside>
                        <aside>
                            <header class="clearfix">
                                <span>移民留学</span>
                                <router-link :to="{name: 'NewsSecondaryList', params: {type: '8' }}" title="移民留学新闻资讯" alt="移民留学新闻资讯">更多></router-link>
                            </header>
                            <div class="USRealEstateNews-ul-skeleton">
                                <a-skeleton active :title="false" :paragraph="{rows: 1, width: '100%'}" v-for="(item, index) in ImmigrationStudyAbroadItem" :key="index" :loading="ImmigrationStudyAbroadLoading" />
                            </div>
                            <ul v-show="!ImmigrationStudyAbroadLoading && !ImmigrationStudyAbroadNoDataShow">
                                <li v-for="(item,index) in ImmigrationStudyAbroadItem" :key="index">
                                    <router-link tag="a" :to="{name: 'NewsDetails', params: {newsId: item.id }}" class="webkit-text-overflow-1lines" target="_blank" :title="item.title" :alt="item.title">
                                        <i class="iconfont icon-weidu"></i>{{ isNull0(item.title) }}
                                    </router-link>
                                </li>
                            </ul>
                            <h5 style="text-align: center; padding: 0 15px; line-height: 115px; margin: 8px 0 0 0;" v-show="ImmigrationStudyAbroadNoDataShow">暂未查询到数据！</h5>
                        </aside>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="right-box article">
                        <aside>
                            <header class="clearfix">
                                <span>海外财经</span>
                                <router-link :to="{name: 'NewsSecondaryList', params: {type: '7' }}" title="海外财经新闻资讯" alt="海外财经新闻资讯">更多></router-link>
                            </header>
                            <div class="USRealEstateNews-ul-skeleton">
                                <a-skeleton active :title="false" :paragraph="{rows: 1, width: '100%'}" v-for="(item, index) in USEconomicsItem" :key="index" :loading="USEconomicsLoading" />
                            </div>
                            <ul v-show="!USEconomicsLoading && !USEconomicsNoDataShow">
                                <li v-for="(item,index) in USEconomicsItem" :key="index">
                                    <router-link :to="{name: 'NewsDetails', params: {newsId: item.id }}" class="webkit-text-overflow-1lines" target="_blank" :title="item.title" :alt="item.title">
                                        <i class="iconfont icon-weidu"></i>{{ isNull0(item.title) }}
                                    </router-link>
                                </li>
                            </ul>
                            <h5 style="text-align: center; padding: 0 15px; line-height: 115px; margin: 8px 0 0 0;" v-show="USEconomicsNoDataShow">暂未查询到数据！</h5>
                        </aside>
                        <aside>
                            <header class="clearfix">
                                <span>海外生活</span>
                                <router-link :to="{name: 'NewsSecondaryList', params: {type: '9' }}" title="海外生活新闻资讯" alt="海外生活新闻资讯">更多></router-link>
                            </header>
                            <div class="USRealEstateNews-ul-skeleton">
                                <a-skeleton active :title="false" :paragraph="{rows: 1, width: '100%'}" v-for="(item, index) in USLifeItem" :key="index" :loading="USLifeLoading" />
                            </div>
                            <ul v-show="!USLifeLoading && !USLifeNoDataShow">
                                <li v-for="(item,index) in USLifeItem" :key="index">
                                    <router-link :to="{name: 'NewsDetails', params: {newsId: item.id }}" class="webkit-text-overflow-1lines" target="_blank" :title="item.title" :alt="item.title">
                                        <i class="iconfont icon-weidu"></i>{{ isNull0(item.title) }}
                                    </router-link>
                                </li>
                            </ul>
                            <h5 style="text-align: center; padding: 0 15px; line-height: 115px; margin: 8px 0 0 0;" v-show="USLifeNoDataShow">暂未查询到数据！</h5>
                        </aside>
                    </a-col>
                </a-row>
            </div>
        </div>
    </article>
</template>

<script>
    export default {
        data() {
            return {
                AdvertisingNewsItem: [],//左侧广告新闻资讯轮播数据
                mySwiper: null,//左侧广告新闻资讯轮播的swiper配置

                USRealEstateItem:[],    //新闻资讯——美国房产-type：6
                USRealEstateLoading: true, //新闻资讯——美国房产——骨架屏加载loading
                USRealEstateNoDataShow: false,//新闻资讯——美国房产——没有数据提示信息是否显示

                USEconomicsItem:[],     // 新闻资讯——美国财经-type：7
                USEconomicsLoading: true, //新闻资讯——美国财经——骨架屏加载loading
                USEconomicsNoDataShow: false,//新闻资讯——美国财经——没有数据提示信息是否显示

                ImmigrationStudyAbroadItem:[],  // 新闻资讯——移民留学-type：8
                ImmigrationStudyAbroadLoading: true, //新闻资讯——移民留学——骨架屏加载loading
                ImmigrationStudyAbroadNoDataShow: false,//新闻资讯——移民留学——没有数据提示信息是否显示

                USLifeItem:[],  // 新闻资讯——美国生活-type：9
                USLifeLoading: true, //新闻资讯——美国生活——骨架屏加载loading
                USLifeNoDataShow: false,//新闻资讯——美国生活——没有数据提示信息是否显示

            }
        },
        computed: {},
        created() {
        },
        mounted() {
            //获取左侧广告新闻资讯轮播数据
            this.getAdvertisingNewsData();
            //美国房地产资讯
            this.getFourTypeNewsData(6);
            this.getFourTypeNewsData(7);
            this.getFourTypeNewsData(8);
            this.getFourTypeNewsData(9);
        },
        methods: {
            // 获取左侧广告新闻资讯轮播数据
            getAdvertisingNewsData() {
                this.$get('/a/8').then(res => {
                    if (res.status == 0) {
                        this.AdvertisingNewsItem = res.data.list;

                        this.$nextTick(() => {
                            this.mySwiper = new Swiper('#AdvertisingNews-swiper-container', {
                                loop : true,
                                autoplay: {
                                    delay: 5000,//自动切换的时间间隔，单位ms
                                    stopOnLastSlide: false,//如果设置为true，当切换到最后一个slide时停止自动切换
                                    disableOnInteraction: true,//用户操作swiper之后，是否禁止autoplay。默认为true,如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
                                },
                                effect : 'fade',//slide的切换效果：淡入淡出
                                spaceBetween: 0,//slide之间的距离（单位px）
                                pagination: {
                                    el: '.swiper-pagination',
                                    clickable :true,
                                },
                                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                            });
                        })
                    }else{
                        console.log(res.msg);
                    }
                });
            },
            //美国房地产资讯
            getFourTypeNewsData(newsType) {
                this.$get('/news/list/'+ newsType +'/1/4').then(res => {
                    if (res.status == 0) {
                        switch (newsType){
                            case 6:
                                this.USRealEstateItem = res.list;
                                this.USRealEstateLoading = false;
                                this.USRealEstateNoDataShow = false;
                                break;
                            case 7:
                                this.USEconomicsItem = res.list;
                                this.USEconomicsLoading = false;
                                this.USEconomicsNoDataShow = false;
                                break;
                            case 8:
                                this.ImmigrationStudyAbroadItem = res.list;
                                this.ImmigrationStudyAbroadLoading = false;
                                this.ImmigrationStudyAbroadNoDataShow = false;
                                break;
                            case 9:
                                this.USLifeItem = res.list;
                                this.USLifeLoading = false;
                                this.USLifeNoDataShow = false;
                                break;
                        }
                    } else {
                        console.log(res.msg);
                        switch (newsType){
                            case 6:
                                this.USRealEstateNoDataShow = true;
                                break;
                            case 7:
                                this.USEconomicsNoDataShow = true;
                                break;
                            case 8:
                                this.ImmigrationStudyAbroadNoDataShow = true;
                                break;
                            case 9:
                                this.USLifeNoDataShow = true;
                                break;
                        }
                    }
                });
            }

        },
        components: {}
    }
</script>

<style lang="less" type="text/less">
    body {
        .homePage-USRealEstateNews-box{
            padding: 40px 0;
            >.container{
                >.content{
                    .ant-row {
                        padding: 20px 0;
                        >.left-box{
                            border-right: 1px solid #ccc;
                            >.swiper-container{
                                >.swiper-wrapper{
                                    >.swiper-slide{
                                        >a{
                                            display: block;
                                            position: relative;
                                            overflow: hidden;
                                            >img{
                                                width: 100%;
                                                height: 320px;
                                                -webkit-transition: all linear 1s;
                                                -moz-transition: all linear 1s;
                                                transition: all linear 1s;
                                            }
                                            >p{
                                                width: 100%;
                                                position: absolute;
                                                bottom: 0;
                                                background: rgba(0,0,0,.4);
                                                color: #fff;
                                                padding: 0 0 0 15px;
                                            }
                                        }
                                    }
                                }
                            }
                            .swiper-pagination {
                                text-align: right;
                                bottom: 0;
                                right: 20px;
                                left: auto;
                                >span{
                                    background: #fff;
                                    opacity: .6;
                                }
                                >.swiper-pagination-bullet-active{
                                    opacity: 1;
                                    background: #007aff;
                                }
                            }
                        }
                        >.center-box,
                        >.right-box{
                            border-right: 1px solid #ccc;
                            >aside{
                                border-bottom: 1px solid #ccc;
                                padding: 0 0 10px 0;
                                >header{
                                    >span{
                                        float: left;
                                        font-size: 16px;
                                        font-weight: bold;
                                    }
                                    >a{
                                        float: right;
                                        font-size: 14px;
                                        color: #999;
                                    }
                                }
                                >.USRealEstateNews-ul-skeleton{
                                    .ant-skeleton{
                                        margin: 15px 0 0 0;
                                        .ant-skeleton-content{
                                            vertical-align: middle;
                                        }
                                    }
                                }
                                >ul{
                                    margin: 8px 0 0 0;
                                    >li{
                                        margin: 5px 0 0 0;
                                        height: 25px;
                                        line-height: 25px;
                                        font-size: 16px;
                                        >a{
                                            text-decoration: none;
                                            color: #666;
                                        }
                                        >a:hover{
                                            color: #0087e5;
                                        }
                                    }
                                }
                            }
                            >aside:last-of-type{
                                border: none;
                                margin: 10px 0 0 0;
                            }
                        }
                        >.right-box{
                            border: none;
                        }
                    }
                }
            }
        }
    }
</style>
